<template>
<div class="profile-page">
    <div class="user-info">
        <div class="container">
        <div class="row">

            <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="profile.image" class="user-img" />
            <h4>{{ profile.username }}</h4>
            <p>
                {{ profile.bio }}
            </p>
            <button 
                class="btn btn-sm btn-outline-secondary action-btn"
                v-if="!isCurrentUser"
                :class="{active: profile.following}"
                @click="onFollow(profile)"
                :disabled="profile.followDisable"
            >
                <i class="ion-plus-round"></i>
                &nbsp;
                {{profile.following ? 'Unfollow' : 'Follow'}} {{ profile.username }}
            </button>
            <!-- 用户查看个人资料显示编辑 -->
            <nuxt-link 
                class="btn btn-sm btn-outline-secondary action-btn"
                v-if="isCurrentUser"
                :to="{
                    name: 'settings'
                }">
                <i class="ion-gear-a"></i> Edit Profile Settings
            </nuxt-link>
            </div>

        </div>
        </div>
    </div>

    <div class="container">
        <div class="row">

        <div class="col-xs-12 col-md-10 offset-md-1">
            <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
                <li class="nav-item" @click="onTabChange('my')">
                    <span 
                        style="cursor:pointer" 
                        class="nav-link"
                        :class="{active: currentType === 'my'}"
                        >My Articles</span>
                </li>
                <li class="nav-item" @click="onTabChange('favorited')">
                    <span 
                        style="cursor:pointer" 
                        class="nav-link"
                        :class="{active: currentType === 'favorited'}"
                        >Favorited Articles</span>
                </li>
            </ul>
            </div>

            <article-preview
                v-for="article in articles"
                :key="article.slug"
                :article="article"
            />

        </div>

        </div>
    </div>
</div>
</template>

<script>
import { mapState } from 'vuex'

import { getProfile } from '@/api/user'
import { getArticles } from '@/api/article'
import { addFollow, deleteFollow } from '@/api/user'

import ArticlePreview from './components/article-preview'

export default {
    middleware: 'authenticated',
    name: 'ProfileIndex',
    // watchQuery: ['tab'],
    components: {
        ArticlePreview
    },
    async asyncData({ params }) {
        const username = params.username
        const { data: { profile } } = await getProfile(username)
        profile.followDisable = false
        return {
            profile
        }
    },
    data() {
        return {
            articles: [],
            currentType: 'my'
        }
    },
    computed: {
        ...mapState(['user']),
        isCurrentUser() {
            return this.user.username === this.profile.username
        }
    },
    mounted() {
        this.getMyArticle()
    },
    methods: {
        // 获取用户个人文章
        async getMyArticle() {
            const { data } = await getArticles({ author: this.profile.username })
            const { articles, articlesCount } = data
            articles.forEach(article => article.favoriteDisable = false)
            this.articles = articles
        },
        // 获取用户点赞文章
        async getFavorited() {
            const { data } = await getArticles({ favorited: this.profile.username })
            const { articles, articlesCount } = data
            articles.forEach(article => article.favoriteDisable = false)
            this.articles = articles
        },
        // 更改标签，重新请求
        onTabChange(type) {
            if (this.currentType === type) return // 防止重复点击
            this.currentType = type
            if (type === 'my') {
                this.getMyArticle()
            } else if (type === 'favorited') {
                this.getFavorited()
            }
        },
        async onFollow(profile) {
            const { username } = profile
            profile.followDisable = true
            if (profile.following) {
                // 取消关注
                await deleteFollow(username)
                profile.following = false
            } else {
                // 添加关注
                await addFollow(username)
                profile.following = true
            }
            profile.followDisable = false
        }
    },
    // 复用界面，进入其他用户界面，重新获取文章列表
    beforeRouteUpdate(to, from, next) {
        console.log(to, from)
        next()
        this.$nextTick( () => this.getMyArticle() )
    }
}
</script>

<style>

</style>